package com.heiko.bloom

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import com.heiko.bloom.ui.theme.*
import com.heiko.bloom.utils.toast

private lateinit var navController: NavHostController

@Composable
fun WelcomePage(_navController: NavHostController) {
    navController = _navController
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(pink100)
    ) {
        Background()
        WelcomeContent()
    }
}

@Preview(showBackground = true, backgroundColor = 0xFFFFF1F1)
@Composable
private fun Background() {
    Image(
        painter = rememberVectorPainter(image = ImageVector.vectorResource(id = R.drawable.ic_light_welcome_bg)),
        contentDescription = "welcome_bg",
        modifier = Modifier.fillMaxSize()
    )
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
private fun WelcomeContent() {
    Column(modifier = Modifier.fillMaxSize()) {
        Spacer(modifier = Modifier.height(72.dp))
        LeafImage()
        Spacer(modifier = Modifier.height(48.dp))
        WelcomeTitle()
        Spacer(modifier = Modifier.height(40.dp))
        WelcomeButton()
    }
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
private fun LeafImage() {
    Image(
        painter = rememberVectorPainter(image = ImageVector.vectorResource(id = R.drawable.ic_light_welcome_illos)),
        contentDescription = "welcome_illos",
        modifier = Modifier
            .wrapContentSize() //允许内容以其所需的大小进行测量，会忽略最小宽度或最小高度的约束
            .padding(start = 88.dp)
    )
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
private fun WelcomeTitle() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth()
    ) {
        Image(
            painter = rememberVectorPainter(image = ImageVector.vectorResource(id = R.drawable.ic_light_logo)),
            contentDescription = "welcome logo",
            modifier = Modifier
                .wrapContentWidth()
                .height(32.dp)
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(32.dp),
        )
        Text(
            text = "Beautiful home garden solutions",
            textAlign = TextAlign.Center,
            style = subtitle1,
            color = gray
        )
    }
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
private fun WelcomeButton() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth()
    ) {
        Button(
            onClick = {
                toast("create account")
            }, modifier = Modifier
                .height(48.dp)
                .padding(horizontal = 16.dp)
                .fillMaxWidth()
                .clip(medium),
            colors = ButtonDefaults.buttonColors(backgroundColor = pink900)
        ) {
            Text(text = "Create account", style = button, color = white)
        }
        Spacer(modifier = Modifier.height(8.dp))
        TextButton(onClick = {
            toast("login")
        }, modifier = Modifier.padding(16.dp)) {
            Text(
                text = "Log in",
                style = button,
                color = pink900,
                modifier = Modifier.clickable {
                    navController.navigate("login")
                })
        }
    }
}